<template>
    <div>
        <el-form ref="form" label-width="80px" label-position="left" size="small">
            <div class="name_bold">数据设置</div>
            <el-form-item label="名称" class="marginTop16">
                <el-input placeholder="请输入内容" v-model="config.name" maxlength="30" show-word-limit />
            </el-form-item>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <l-select :options="lr_report_scheme_f_TempCategoryOptions" style="width: 100%;"
                    v-model="config.formClassify" />
            </el-form-item>

            <el-form-item label="" class="marginTop16 dataSource_div" label-width="0px">
                <l-dbsource-select placeholder="选择数据源" v-model="config.dataSource" @change="handleDataSourceChange"
                    @init="handleDataSourceInit" />
            </el-form-item>

            <el-form-item label="状态" class="marginTop16">
                <el-switch v-model="config.formType" />
            </el-form-item>
            <el-form-item label="描述" class="marginTop16">
                <el-input v-model="config.formDescribe" maxlength="30" show-word-limit />
            </el-form-item>
            <el-divider />

            <div class="name_bold">纸张选择</div>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <l-select style="width: 100%;" :options="paperTypeOption" v-model="config.formPaper" />
            </el-form-item>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <l-select placeholder="纵向" style="width: 100%;" :options="directionOption" v-model="config.formDirection" />
            </el-form-item>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <l-select style="width: 100%;" :options="distanceOption" v-model="config.formDistance" />
            </el-form-item>

            <el-col :span="12">
                <el-form-item label="W" class="marginTop16" label-width="30px">
                    <el-input style="width: 70px;" v-model="config.formW" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="H" class="marginTop16" label-width="30px">
                    <el-input style="width: 70px;" v-model="config.formH" />
                </el-form-item>
            </el-col>
            <div class="name_bold">页边距</div>
            <el-col :span="12">
                <el-form-item label="上" label-width="30px">
                    <el-input style="width: 70px;" v-model="config.formPaddingT" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="左" label-width="30px">
                    <el-input style="width: 70px;" v-model="config.formPaddingL" />
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="下" class="marginTop16" label-width="30px">
                    <el-input style="width: 70px;" v-model="config.formPaddingB" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="右" class="marginTop16" label-width="30px">
                    <el-input style="width: 70px;" v-model="config.formPaddingR" />
                </el-form-item>
            </el-col>

            <div class="name_bold">背景设置</div>
            <el-form-item label="透明度" class="marginTop16">
                <el-slider v-model="config.formBackTransp" style="width: 120px;" />
            </el-form-item>

            <el-form-item class="marginTop16" label-width="0px">
                <div style="display: flex;">
                    <l-checkbox :options="[{ label: '背景颜色', value: '1' }]" v-model="config.choseBackColor" />
                    <l-input-color :notInput="true" v-model="config.fromBackColor" style="margin-left: 10px;" />
                </div>
            </el-form-item>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <div style="display: flex;">
                    <l-checkbox :options="[{ label: '背景图片', value: '1' }]" v-model="config.choseBackImg" />
                    <l-img-select v-model="config.formBackImage" style="margin-left: 10px;" />
                </div>
            </el-form-item>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <el-col :span="12">
                    <el-form-item label="W" class="marginTop16" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.backImageW" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="H" class="marginTop16" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.backImageH" />
                    </el-form-item>
                </el-col>
            </el-form-item>
            <l-select style="width: 100%;" :options="backImgOption" v-model="config.backRepeat" />

            <div class="name_bold marginTop16">起始位置</div>
            <el-form-item label="" label-width="0px">
                <el-col :span="12">
                    <el-form-item label="上" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.originT" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="左" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.originL" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="下" class="marginTop16" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.originB" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="右" class="marginTop16" label-width="30px">
                        <el-input style="width: 70px;" v-model="config.originR" />
                    </el-form-item>
                </el-col>
            </el-form-item>


            <el-divider />

            <div class="name_bold">边框设置</div>

            <el-form-item label="" class="marginTop16" label-width="0px">
                <div style="display: flex;">
                    <l-checkbox :options="[{ label: '边框颜色', value: '1' }]" v-model="config.choseBorder" />
                    <l-input-color :notInput="true" style="margin-left: 10px;" v-model="config.borderColor" />
                </div>
            </el-form-item>
            <l-select placeholder="实线" style="width: 100%;" :options="borderOption" />
            <el-form-item label="" class="marginTop16" label-width="0px">
                <el-col :span="12">
                    <el-form-item label="大小" class="marginTop16" label-width="50px">
                        <el-input style="width: 70px;" v-model="config.lineSize" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="间隙" class="marginTop16" label-width="50px">
                        <el-input style="width: 70px;" v-model="config.lineInterval" />
                    </el-form-item>
                </el-col>
            </el-form-item>


            <div class="name_bold">页眉页脚</div>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <div style="display: flex;">
                    <l-checkbox :options="[{ label: '页眉', value: '1' }]" v-model="config.choseHead"></l-checkbox>
                    <div style="margin-left: 10px;">
                        距离顶端
                        <el-input style="width: 70px;" v-model="config.headT" />
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <div style="display: flex;">
                    <l-checkbox :options="[{ label: '页脚', value: '1' }]" v-model="config.choseBottom"></l-checkbox>
                    <div style="margin-left: 10px;">
                        距离底端
                        <el-input style="width: 70px;" v-model="config.headB" />
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <l-select :options="beginOption" style="width: 100%;" v-model="config.formHeadAlign" />
            </el-form-item>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <l-select placeholder="第1页 共X页" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="" class="marginTop16" label-width="0px">
                <l-select :options="appliedRangeOption" style="width: 100%;" />
            </el-form-item>
        </el-form>

        <!-- <l-dbsource-selectdialog :visible.sync="dbtableSelectdialog" :multiple="false" @select="dbSelect"></l-dbsource-selectdialog> -->
    </div>
</template>

<script>
import { printMixin } from './index'
export default ({
    props: ['pageConfig'],
    data() {
        return {
            dbtableSelectdialog: false,
            config: this.pageConfig
        }
    },
    mixins: [printMixin],
    methods: {
        changeDataSource() {
            console.log("触发数据源")
            this.dbtableSelectdialog = true
        },
        handleDataSourceChange(data,item) {
            console.log("data,item", data,item)
        },
        handleDataSourceInit(e){
            console.log("data,item", e)
        }
    }
})
</script>
<style lang="scss">
.dataSource_div{
    .el-input-group__append{
        display: none;
    }
}
</style>
